<template>
    <div class="device-title-with-device-file">
        <div class="alias-manufactorycode">
            {{devicename}}({{manucode}})
        </div>
        <van-button
            @click="getDeviceProfile"
            class="morebtn"
            plain
            type="primary"
        >设备档案</van-button>
    </div>
    <van-dialog
        v-model:show="showdevice"
        confirmButtonText="关闭"
        confirmButtonColor="#000000"
        cancelButtonText="详情"
        cancelButtonColor="#000000"
        :show-cancel-button="isshowedit(manucode)"
        @cancel="gotoedit"
        @confirm="colsedialog"
    >
        <div
            class="infoclass"
            v-if="manucode === ''">
            暂无关联设备
        </div>
        <div
            class="infoclassdetail"
            v-else>
            <device-info
                :listData="devicedetail"
                contentheight="350px" />
        </div>
        <!-- <img src="https://img.yzcdn.cn/vant/apple-3.jpg" /> -->
    </van-dialog>
</template>

<script>
import Cookies from 'js-cookie';
import { useProductArchiveDevicesSetup } from '@/setup/productarchive/ProductArchiveDevicesSetup.js';
import DeviceInfo from '../../MaintenanceOrderDetail/DeviceInfo.vue';
import { reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
export default {
    components: {
        DeviceInfo
    },
    props: {
        devicename: String,
        manucode: String
    },
    setup (props) {
        const router = useRouter();
        const state = reactive({
            devicedetail: {},
            showdevice: false
        });
        const isshowedit = (val) => {
            if (val === '' || val === undefined) {
                return false;
            } else {
                return true;
            }
        };
        const colsedialog = () => {
            state.showdevice = false;
        };
        const gotoedit = () => {
            router.push({
                path: '/deviceView',
                query: {
                    uuid: state.devicedetail.uuid,
                    customer_id: state.devicedetail.customer_id,
                    product_id: state.devicedetail.product_id
                }
            });
        };
        const { getPrdArchDetail } = useProductArchiveDevicesSetup();
        const getDeviceProfile = () => {
            const param = {
                manucode: props.manucode,
                username: Cookies.get('username')
            };
            getPrdArchDetail(param, (data) => {
                state.devicedetail = data.value;
                state.showdevice = true;
            });
        };
        return {
            isshowedit,
            colsedialog,
            gotoedit,
            getDeviceProfile,
            ...toRefs(state)
        };
    }

};
</script>

<style lang="scss" scoped>
.device-title-with-device-file{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    height: 44px;
    background-color: white;
    .alias-manufactorycode{
        margin-left: 15px;
        font-size: 17px;
        line-height: 44px;
        width: 191px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .morebtn {
        font-size: 17px;
        border: none;
        height: 44px;
        // width: 20px;
        white-space: nowrap;
    }
}
</style>
